<template>
	<view class="container">
		<!-- 基本信息 -->
		<view v-if="currentStep === 0">
			<h2 class="title">{{ app.language.tbrInfo }}</h2>
			<view class="infoBox">
				<!-- 姓名 -->
				<view class="formItem1">
					<text>{{ app.language.name }}:</text>
					<view class="formB">
						{{form.name}}
					</view>
				</view>
				<!-- 公民身份证号 -->
				<view class="formItem1">
					<text>{{ app.language.card }}:</text>
					<view class="formB">
						{{form.card}}
					</view>
				</view>
				<!-- 联系电话 -->
				<view class="formItem1">
					<text>{{ app.language.phone }}:</text>
					<view class="formB">
						{{form.phone}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="currentStep === 1">
			<h2 class="title">{{app.language.ldy_minorInfo}}</h2>
			<view class="infoBox">
				<view class="form" v-for="(item, index) in formData" :key="index">
					<image src="../../static/del.png" mode="" class="del" v-if="index>0" @click="handleDel(index)">
					</image>
					<!-- 未成年人姓名 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_minorName }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].minorName"
								:placeholder="app.language.ldy_IminorName" />
						</view>
					</view>
					<!-- 身份证号码 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_minorCard }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].idcard"
								:placeholder="app.language.ldy_IminorCard" />
						</view>
					</view>
					<!-- 户籍所在地 -->
					<view class="formItem1">
						<view>
							<text><text class="bt">*</text>{{ app.language.ldy_minorDomicile }}:</text>
							<!-- 三级联动组件 -->
							<area-picker v-if="formData[index].areaData.provinces.length > 0"
								:area-data="formData[index].areaData" @change="handleFirstAreaChange(index, $event)" />
						</view>
					</view>
					<!-- 身份征得直系家属同意 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_minorRelAgree }}:</text>
						<view class="formB">
							<radio-group @change="handleChange(index, $event)" class="radioGroup">
								<radio value="1" color="#2f8ef9" />
								<text class="radioYes">{{app.language.ty}}</text>
								<radio value="0" color="#2f8ef9" />
								<text>{{app.language.bty}}</text>
							</radio-group>
						</view>
					</view>
					<!-- 家属联系电话 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.ldy_minorFamilyTel }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].familyContactInformation"
								:placeholder="app.language.ldy_IminorFamilyTel" />
						</view>
					</view>
					<!-- 随行人员姓名 -->
					<view class="formItem1">
						<text>{{ app.language.ldy_otherName }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].withPeopleName"
								:placeholder="app.language.ldy_IotherName" />
						</view>
					</view>
					<!-- 身份证号码 -->
					<view class="formItem1">
						<text>{{ app.language.ldy_card }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].withIdcard"
								:placeholder="app.language.ldy_Icard" />
						</view>
					</view>
					<!-- 随行人员户籍所在地 -->
					<view class="formItem1">
						<!-- <text><text class="bt">*</text>{{ app.language.ldy_minorDomicile }}:</text>
						<view class="formB">
							<picker mode="selector" name="domicile" :range="hjList" @change="onChange1(index, $event)">
								<view class="picker">
									{{formData[index].selectedValue1}}
								</view>
							</picker>
						</view> -->
						<text>{{ app.language.ldy_minorDomicile }}:</text>
						<!-- 三级联动组件 -->
						<area-picker v-if="formData[index].areaData.provinces.length > 0"
							:area-data="formData[index].areaData" @change="handleTwoAreaChange(index, $event)" />
					</view>
					<!-- 与未成年人关系 -->
					<view class="formItem1">
						<text>{{ app.language.ldy_otherRel }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].relationship"
								:placeholder="app.language.ldy_IotherRel" />
						</view>
					</view>
					<!-- 联系电话 -->
					<view class="formItem1">
						<text>{{ app.language.phone }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].contactInformation"
								:placeholder="app.language.Iphone" />
						</view>
					</view>
				</view>
			</view>
			<!-- 新增 -->
			<view class="txry" @click="handleAdd">
				<view class="jia">
					<image src="../../static/jiahao.png" mode="" class="icon"></image>
					<text>新增</text>
				</view>
			</view>
		</view>
		<view>
			<button v-if="currentStep > 0" @click="previousStep"
				class="previousStep">{{ app.language.previousStep }}</button>
			<button v-if="currentStep < steps.length - 1" @click="nextStep"
				class="nextStep">{{ app.language.nextStep }}</button>
			<button v-if="currentStep === steps.length - 1" @click="submitForm"
				class="submitForm">{{ app.language.tijiao }}</button>
		</view>
	</view>
</template>

<script>
	import graceChecker from "../../components/graceChecker.js"
	import {
		AddHotelinformationformMinor,
		GetHotelInfo
	} from '@/api/form.js'
	import {
		getJgSq
	} from '@/api/api.js'
	const global = getApp().globalData;
	import {
		fetchAndProcessAreaData
	} from '@/api/processCountryData.js';
	import AreaPicker from '@/components/areapicker.vue';
	export default {
		components: {
			AreaPicker
		},
		data() {
			return {
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				currentStep: 0,
				form: {
					name: "",
					card: "",
					phone: "",
					hffuuid: "",
				},
				steps: [{
						id: 0,
						title: '姓名'
					},
					{
						id: 1,
						title: '电话'
					}
				],
				// 户籍所在地
				hjList: [],
				hjsList: [],
				selectedValue: '',
				selectedOtherValue: '',
				// 未成年人
				formData: [{
					minorName: "",
					idcard: "",
					registeredResidence: "",
					isAgree: "",
					familyContactInformation: "",
					selectedValue: "",
					// 随行人员
					withPeopleName: "",
					withIdcard: "",
					selectedValue1: "",
					relationship: "",
					contactInformation: "",
					areaData: {
						provinces: [],
						cities: {},
						areas: {}
					}
				}],

				policeStation: "",
				token: "",
				uuid: ""
			};
		},
		async onLoad(options) {
			uni.showLoading({
				title: this.app.language.jzz,
			});
			this.form.selectedValue = options.hffuuid
			this.selectedValue = this.app.language.qxz
			this.selectedOtherValue = this.app.language.qxz
			this.selectedValue = this.app.language.qxz
			this.formData[0].selectedValue = this.app.language.qxz
			this.formData[0].selectedValue1 = this.app.language.qxz
			this.formData[0].areaData = await fetchAndProcessAreaData();
			// 缓存
			this.getToken()
		},
		methods: {
			// 获取缓存
			getToken() {
				let that = this
				uni.getStorage({
					key: 'loginData',
					success: function(res) {
						uni.hideLoading();
						that.token = res.data.userInfo.appToken
						// this.hffuuid = 
						that.userInfo = res.data.userInfo
						that.form.name = res.data.userInfo.userName,
							that.form.card = res.data.userInfo.idcard,
							that.form.phone = res.data.userInfo.phonenumber;
							// 获取数据信息
							// uni.showLoading({
							// 	title: that.app.language.jzz,
							// });
							let data = {
								appToken: res.data.userInfo.appToken,
							}
						// 获取旅店业基本信息
						GetHotelInfo(data).then((res) => {
							if (res.code == 200) {
								uni.hideLoading();
								if (res.data.hotelBaseList && res.data.hotelBaseList.length > 0) {
									that.policeStation = res.data.hotelBaseList[0].policeStation
									that.uuid = res.data.hotelBaseList[0].uuid

									console.log('that.uuidthat.uuid', that.uuid)
								}
							}
						})
					}
				});
			},
			nextStep() {
				console.log('currentStep', this.currentStep)
				// formData
				if (this.currentStep == 0) {
					if (this.currentStep < this.steps.length - 1) {
						this.currentStep++;
					}
					return
				}

				if (this.currentStep < this.steps.length - 1) {
					this.currentStep++;
				}

			},
			previousStep() {
				if (this.currentStep > 0) {
					this.currentStep--;
				}
			},
			//  form表单+1
			handleAdd() {
				let prem = {
					minorName: "",
					idcard: "",
					isAgree: "",
					familyContactInformation: "",
					selectedValue: this.app.language.qxz,
					withPeopleName: "",
					withIdcard: "",
					selectedValue1: this.app.language.qxz,
					relationship: "",
					contactInformation: "",
					areaData: {
						provinces: [],
						cities: {},
						areas: {}
					}
				}
				this.formData.push(prem); // 添加一个新的空表单项
				this.loadAreaData()
			},

			async loadAreaData() {
				uni.showLoading({
					title: this.app.language.jzz
				});

				try {
					const data = await fetchAndProcessAreaData();
					if (data) {
						for (let i = 0; i < this.formData.length; i++) {
							this.formData[i].areaData = data;
						}
					}
					// else {
					// 	uni.showToast({
					// 		title: '加载地区数据失败',
					// 		icon: 'none'
					// 	});
					// }
				} catch (error) {
					console.error('加载地区数据出错:', error);
					// uni.showToast({
					// 	title: '加载地区数据出错',
					// 	icon: 'none'
					// });
				} finally {
					uni.hideLoading();
				}
			},
			// 三级联动-未成年
			handleFirstAreaChange(index, selected) {
				// this.firstSelectedArea = selected;
				console.log('第一个选择器选择:', selected);
				this.formData[index].selectedValue = selected.fullText
				this.formData[index].registeredResidence = selected.fullText
				console.log('this.formData', this.formData)
			},

			// 随行
			handleTwoAreaChange(index, selected) {
				// this.firstSelectedArea = selected;
				console.log('第一个选择器选择:', selected);
				this.formData[index].selectedValue1 = selected.fullText
				this.formData[index].withRegisteredResidence = selected.fullText
				console.log('this.formData', this.formData)
			},

			// 选择未成年人户籍所在地
			// onChange(index, e) {
			// 	this.formData[index].selectedValue = this.hjList[e.detail.value];
			// 	this.formData[index].registeredResidence = this.hjsList[e.detail.value].domicileId;
			// },

			// 随行人员--户籍地
			onChange1(index, e) {
				this.formData[index].selectedValue1 = this.hjList[e.detail.value];
				this.formData[index].withRegisteredResidence = this.hjsList[e.detail.value].domicileId;
			},

			// 选择随行人员户籍所在地
			onOtherChange(e) {
				this.selectedOtherValue = this.list[e.detail.value];
			},

			// form表单-1
			handleDel(index) {
				let that = this
				// uni.showModal({
				// 	// title: '提示',
				// 	content: '确定要删除吗?',
				// 	success: function(res) {
				// 		if (res.confirm) {

				// 			// 用户点击了确定按钮的相关逻辑可以放在这里
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 			// 用户点击了取消按钮的相关逻辑可以放在这里
				// 		}
				// 	}
				// });
				that.formData.splice(index, 1); // 移除指定索引的表单项
			},

			// 亲属是否同意
			handleChange(index, e) {
				this.formData[index].isAgree = e.detail.value;
			},

			// 提交
			submitForm() {
				for (let i = 0; i < this.formData.length; i++) {
					// 姓名
					if (!this.formData[i].minorName) {
						uni.showToast({
							title: this.app.language.ldy_IminorName,
							icon: 'none',
						});
						return
					}
					// 身份证号
					if (!this.formData[i].idcard) {
						uni.showToast({
							title: this.app.language.ldy_IminorCard,
							icon: 'none',
						});
						return
					}
					// 户籍所在地
					if (!this.formData[i].registeredResidence) {
						uni.showToast({
							title: this.app.language.ldy_IminorCard,
							icon: 'none',
						});
						return
					}
					// 直系亲属是否是否同意
					if (!this.formData[i].isAgree) {
						uni.showToast({
							title: this.app.language.ldy_iminorRelAgree,
							icon: 'none',
						});
						return
					}
					// 直系亲属联系电话
					if (!this.formData[i].familyContactInformation) {
						uni.showToast({
							title: this.app.language.ldy_IminorFamilyTel,
							icon: 'none',
						});
						return
					}

					// // 随行姓名
					// if (!this.formData[i].withPeopleName) {
					// 	uni.showToast({
					// 		title: this.app.language.ldy_IotherName,
					// 		icon: 'none',
					// 	});
					// 	return
					// }
					// // 随行身份证号
					// if (!this.formData[i].withIdcard) {
					// 	uni.showToast({
					// 		title: this.app.language.ldy_Icard,
					// 		icon: 'none',
					// 	});
					// 	return
					// }
					// // 户籍地
					// if (!this.formData[i].selectedValue1 || this.formData[i].selectedValue1 === this.app.language.qxz) {
					// 	uni.showToast({
					// 		title: this.app.language.ldy_IminorDomicile,
					// 		icon: 'none',
					// 	});
					// 	return
					// }
					// // 与未成年人关系
					// if (!this.formData[i].relationship) {
					// 	uni.showToast({
					// 		title: this.app.language.ldy_IotherRel,
					// 		icon: 'none',
					// 	});
					// 	return
					// }
					// // 电话号码
					// if (!this.formData[i].contactInformation) {
					// 	uni.showToast({
					// 		title: this.app.language.Iphone,
					// 		icon: 'none',
					// 	});
					// 	return
					// }
				}
				for (let i = 0; i < this.formData.length; i++) {
					this.formData[i].appToken = this.token;
					this.formData[i].hffuuid = this.uuid;
					this.formData[i].policeStation = this.policeStation;
				}
				const submitData = this.formData.map(item => {
					const {
						areaData,
						...rest
					} = item; // 解构排除 areaData
					return rest; // 返回不包含 areaData 的新对象
				});
				uni.showLoading({
					title: this.app.language.jzz,
				});
				let data1 = [submitData]
				let data = {
					minorList: data1[0],
				}
				AddHotelinformationformMinor(data).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: this.app.language.qddsh,
							icon: 'success',
						});
						setTimeout(() => {
							console.log('跳转首页')
							uni.reLaunch({
								url: '/pages/hotel/listText'
							});
						}, 1000);
					}
				})


				// 这里可以添加提交表单的逻辑
			}
		}
	};
</script>
<style>
	.container {
		padding: 10rpx 20rpx;
	}

	.form {
		border: 1px solid #ddd;
		box-shadow: 1px 1px 10rpx #ddd;
		padding: 0 20rpx;
		margin-top: 20rpx;
		position: relative
	}

	.formItem1,
	.formItem {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd
	}

	.formB {
		/* background-color: #f3f3f3; */
		font-size: 24rpx;
		padding: 10rpx;
		margin-top: 10rpx;
		position: absolute;
		right: 10rpx;
		top: -2rpx;
		color: #808080;
		text-align: right;
	}

	.formItem1 text,
	.formItem text {
		font-size: 26rpx;
	}

	.title {
		border-left: 4rpx solid #2f8ef9;
		padding-left: 10rpx;
		margin: 10rpx 0 10rpx 10rpx;
		font-weight: bold;
		font-size: 26rpx;
	}

	.nextStep,
	.previousStep,
	.submitForm {
		background-color: #2f8ef9;
		color: #fff;
		font-size: 26rpx;
		margin-top: 20rpx;
	}

	.bt {
		color: red;
		margin-right: 5rpx;
	}

	.jia {
		border: 1px dashed #2f8ef9;
		text-align: center;
		color: #2f8ef9;
		margin: 20rpx auto 0;
		font-size: 26rpx;
		border-radius: 10rpx;
		padding: 0 0 13rpx;
	}

	.jia image {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 8rpx;
	}

	.del {
		width: 25px;
		height: 25px;
		position: absolute;
		right: -5px;
		top: -8px;
	}

	.polSta {
		font-size: 26rpx;
		font-weight: 500;
		/* text-align: right; */
		color: #2f8ef9;
		margin-top: 15rpx;
	}

	.picker {
		width: 260rpx;
		color: #808080;
	}

	.formB radio-group {
		margin-top: -10rpx;
	}

	.radioYes {
		margin-right: 20rpx;
	}
</style>